<template>
  <div class="table-box w-1/1 h-1/1 bg-[var(--el-bg-color)] p-30px">
    <el-form label-width="150" :model="formData" ref="formRef">
      <el-form-item label="5年期住宅贷款lpr">
        <el-input-number :precision="2" :min="0" :max="100" v-model="formData.lpr"></el-input-number>
        <span class="pl-5px">%</span>
      </el-form-item>
      <el-form-item label="5年期公积金贷款利率">
        <el-input-number :precision="2" :min="0" :max="100" v-model="formData.baseFund"></el-input-number>
        <span class="pl-5px">%</span>
      </el-form-item>
      <el-form-item label="微信小程序码">
        <div>
          <el-image
            :src="url(userInfo.prefix, formData.qr_code_wx)"
            class="w-[130px] h-[130px] border border-dashed border-[2px]"
          >
            <template #error>
              <div class="flex flex-col justify-center h-1/1 cursor-pointer" @click="openSu">
                <div class="text-center">
                  <el-icon size="40" color="#e5e7eb">
                    <Plus />
                  </el-icon>
                </div>
              </div>
            </template>
          </el-image>
          <div>
            <el-button size="small" link type="primary" @click="openSu" v-if="formData.qr_code_wx">重新选择</el-button>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="楼盘来电语音模版">
        <el-input v-model="formData.in_come_audio" :input-style="{ width: '250px' }"></el-input>
      </el-form-item>
      <el-form-item label="楼盘接听语音模版">
        <el-input v-model="formData.out_come_audio" :input-style="{ width: '250px' }"></el-input>
      </el-form-item>
      <el-form-item label="模版描述">
        %loupan表示楼盘;例如欢迎致电%loupan线上售楼处 ;最后会显示比如欢迎致电万科深业湾中新城线上售楼处</el-form-item
      >
      <el-form-item label="提交">
        <el-button type="primary" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
    <su-cai-popup ref="suRef" @get-url="getUrl" mode="select"></su-cai-popup>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { getInfo, editApi } from "@/api/modules/countrySetting";
import { onBeforeMount } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import SuCaiPopup from "@/components/sucaiPopup/index.vue";
import { Plus } from "@element-plus/icons-vue";
import { url } from "@/utils/index";
import { useUserStore } from "@/stores/modules/user";

const { userInfo } = useUserStore();

const suRef = ref<InstanceType<typeof SuCaiPopup> | null>();

const openSu = () => {
  suRef.value?.acceptParams();
};

const getUrl = (val: any) => {
  formData.qr_code_wx = val.url;
  suRef.value?.clear();
  suRef.value?.close();
};

const formData = reactive({ lpr: 0.0, baseFund: 0.0, qr_code_wx: "", in_come_audio: "", out_come_audio: "" });

const getCountryInfo = async () => {
  const { data } = await getInfo();
  formData.baseFund = (data as any).baseFund;
  formData.lpr = (data as any).lpr;
  formData.qr_code_wx = (data as any).qr_code_wx;
  formData.in_come_audio = (data as any).in_come_audio;
  formData.out_come_audio = (data as any).out_come_audio;
};

const formRef = ref<FormInstance>();

const submit = () => {
  if (!formRef.value) return;
  formRef.value.validate(async valid => {
    if (!valid) return;
    await editApi(formData);
    ElMessage.success("成功");
    await getCountryInfo();
  });
};

onBeforeMount(() => {
  Promise.all([getCountryInfo()]);
});
</script>

<style></style>
